import React,{Component} from "react"
import ReactDOM from "react-dom/client"
import './App.css'
import Li from './li';
class Liu extends Component {
  state ={
    title:'',
    content:'',
    list:[
      {
        title:'评论人:李凌轩',
        content:'评论内容:我爱吃粑粑！！！'
      }
    ]
  }
  updateTitle=(e)=>{
    let title = e.target.value
    this.setState({
      title
    })
  }
  updateContent=(e)=>{
    this.setState({
      content : e.target.value
    })
  }
  biao = () => {
    console.log(this.state);
    const {title,content} = this.state
    let newArr = this.state.list.concat([{title,content}])
    this.setState({
      list:newArr
    })
  }
  del = (index) =>{
    this.state.list.splice(index,1)
    this.setState({
      list:this.state.list
    })
  }
render(){
  return(
    <div>
    {/* <div className="body">
      <div className="logo">
        <img className="imgbogo" src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" />
      </div>
      <div className="sousuokuang">
        <div >
          <input className="one" placeholder="请输入要查询的内容" />
        </div>
        <div >
          <button className="but">搜索</button>
        </div>
      </div>
      <div className="xinxi">
        <div className="x_heder">
          <div>百度热搜</div>
          <div>换一换</div>
        </div>
        <div className="x_body">
          <div className="X_body_w">
            <ul>
              <li>有点上头!男子扛铁板狂砸秦桧雕像</li>
              <li>一组海报带你看活力中国</li>
              <li>一组海报带你看活力中国</li>
            </ul>
          </div>
          <div className="X_body_w">
            <ul>
              <li>有点上头!男子扛铁板狂砸秦桧雕像</li>
              <li>一组海报带你看活力中国</li>
              <li>一组海报带你看活力中国</li>
            </ul>
          </div>
        </div>
      </div>
    </div> */}
    {/* <div className="tab">
      <div>
        <h2>
          十一记事本
        </h2>
        <p>记录生活点点滴滴，写下生活每一个美好</p>
        <div className="t_sou">
          <div>
            内容
          </div>
          <div>
            <input />
          </div>
          <div>
            确认
          </div>
        </div>
        <ul className="t_ul">
          <li className="t_li">
            <div className="t_li_r">
              <div className="xu">3</div>
              <sapn>|</sapn>
              <div>第一条笔记</div>
            </div>
            <div>❌</div>
          </li>
          <li className="t_li">
            <div className="t_li_r">
              <div className="xu">3</div>
              <sapn>|</sapn>
              <div>第一条笔记</div>
            </div>
            <div>❌</div>
          </li>
          <li className="t_li">
            <div className="t_li_r">
              <div className="xu">3</div>
              <sapn>|</sapn>
              <div>第一条笔记</div>
            </div>
            <div>❌</div>
          </li>
          <li className="t_li_bot">
            <div>总条数：3</div>
            <div>清楚</div>
          </li>
        </ul>
      </div>


    </div> */}
    {/* <div className="comment">
      <div className="comm">
        <input className="please" onChange={this.updateTitle} type="text" placeholder="请输入评论人"/>
        <textarea className="please" onChange={this.updateContent} placeholder="请输入评论内容" name="" id="" cols="30" rows="10"></textarea>
        <button className="log" onClick={this.biao}>发表评论</button>
        <ul className="biao" >{
          this.state.list.map((item,index)=><li key={index}>
            <h3>{item.title}</h3>
            <p className="lun">{item.content}</p>
            <button onClick={() => this.del(index)}>删除评论</button>
          </li>)
        }
        </ul>
      </div>
    </div> */}
    <Li/>
  </div>
  )
}
}

export default Liu;